<template>
    <div class="chat">
        <div class="chatitems" v-if="message.id >0">
            <div class="chatitem-left chatitem" >
                {{message.content}}
            </div>
        </div>
        <div class="chatitems chatitems-right" v-else>
            <div class="chatitem-right chatitem" >
                {{message.content}}
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    props: {
        message:{type:Object,default:()=>{}}
    },
    data() {
        return {
            show: false
        }
    },
    computed:{
        ...mapState(['user']),
        raden(){
            if(this.message.id!==1){
                this.show = false
            }else{
                this.show = true
            }
        }
    }
}
</script>
<style lang="less" scoped>
.chat{
    width: 100vw;
    display: block;
    overflow: auto;
    margin-bottom:10px ;
}
.chatitems {
    display: block;
    margin: 10px 0 px;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 50vw;
    word-break: break-all;
    

}
.chatitems-right {
    float: right;
    }
.chatitem {
        display: inline-block;
        border-radius: 10%;
        padding: 5px 10px;
        background: #e8e8e8;
    }
</style>